<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.mobile-1.3.2.min.js"></script>
		<link rel="stylesheet" href="../css/jquery.mobile-1.3.2.min.css"/> 
<title>The flight of hot air balloon on html5 canvas例子测试</title>
<style type="text/css">
html, body{
margin:0px;padding:0px;
}
#header{
    background: #0A2B3E;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #7C95A5;
	height:80px;
	padding-top:20px;
	width:100%;
}

#sub_header{
    background: #FF0000;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFFFFF;
	height:50px;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	border-radius:5px;
    padding-top:5px;
}

#page{
// normal size=650px;
width:520px;
margin-left:auto;margin-right:auto;padding-top:10px;padding-bottom:10px;
}

#content_left{
width:500px;
height:400px;
border:solid lightblue 5px;border-radius:5px;
float:left;
margin-bottom:10px;
}

#content_right{
width:200px;
height:400px;
border:solid lightblue 5px;border-radius:5px;
float:left;
margin-left:30px;
margin-bottom:10px;
}

h1,h3{
margin-left:auto;margin:auto; text-align:center;
}
#heading{
margin-left:auto;margin-right:auto;text-align:center;background-color:#0000FF;font-weight:bold;color:#FFFFFF;border-radius:5px;width:280px;font-size:large;padding:3px;
}
#footer{
clear:both;
height:50px;
background: #0A2B3E;
position:absolute;
bottom:0px;
left:0px;
width:100%;
}
</style>
</head>
<div data-role="page" ><!--page2-->
<div data-role="header" data-position="fixed"><h1>Page</h1>
<a href="../../shelf/shelf.html" rel="external" data-icon="back" data-iconpos="left" data-transition="slidefade" data-direction="reverse" class="ui-btn-left">返回</a>
</div><!--header-->
<div data-role="footer" data-position="fixed"><h1>End</h1></div><!--footer-->
<body onLoad="window.setInterval('circ()',60)">
<div id="header">
<div id="sub_header">
<h1>Vivax Solutions</h1>
<h3><em>www.vivaxsolutions.com</em></h3>
</div>
</div>
<div id="page">
<p id="heading">The Flight of Hot Air Balloon</p>
<div id="content_left">
<canvas id="Canvas_T" width="500" height="400" style="background-image:url('lake.jpg');background-repeat:no-repeat;">
</canvas>
<script type="text/JavaScript">
	    var canvas = document.getElementById('Canvas_T');
	    var context = canvas.getContext('2d');
		// image of the top balloon
		var imgObj1=new Image();
		// image of the second balloon
		var imgObj2=new Image();
		var i=0;var j=1;var x; var y;
		// function for the movement
		function circ(){
		i=i+j;
		if(i==400){j=-1;}
		if(i==0){j=1;}
		context.clearRect(0,0,500,400);
		x=i;
		y=Math.round(100+15*Math.sin(i*Math.PI/180));
        context.drawImage(imgObj1,x,y);
		imgObj1.src='hot.png';
        context.drawImage(imgObj2,x,y+180);
		imgObj2.src='hot1.png';
		}
   	  </script>	
</div>
<!--div id="content_right">
content_right
</div-->
<!--div id="footer">
footer
</div-->
</div>
</body>
</html>